<!--
 * @Author: 杨超
 * @Date: 2021-11-24 20:33:45
 * @LastEditTime: 2021-12-01 16:15:11
 * @LastEditors: 杨超
 * @Description:
-->
<template>
    <!-- 普通输入框 -->
    <div
        :style="item.style || {}"
        :class="`form-unqiue-${item.key} ${getTextModel ? '' : 'wti-untext-box'}`"
        class="form-input-box form-item-box"
    >
        <el-radio-group
            v-if="!getTextModel"
            v-model.trim="val"
            :disabled="getDisabled"
            :clearable="true"
            v-bind="bindOptions"
            @blur="e => onBlur(item, e)"
            @focus="e => onFocus(item, e)"
            @change="handleChangeSpe"
        >
            <el-radio v-for="opt in item.options" :key="opt.value" :label="opt.value" @click.native="handleClickSpe">{{
                opt.label
            }}</el-radio>
        </el-radio-group>
        <div v-else :style="item.textStyle || {}" class="form-input-text">
            {{ textModelValue || '-' }}
        </div>
    </div>
</template>

<script>
import FormMixin from './mixin'

export default {
    name: 'FormRadio',
    mixins: [FormMixin],
    data() {
        return {
            prependMsg: '',
            appendMsg: '',
            checkRadioFlag: false
        }
    },
    computed: {
        textModelValue() {
            const content =
                this.item.options &&
                this.item.options.find(item => {
                    return item.value === this.val
                })
            return (content && content.label) || ''
        },

        val: {
            get() {
                return this.value
            },
            set(v) {
                this.$emit('input', v)
                this._valueLink(v)
                // 只有非子表单的情况下，才会冒泡上去数据变更
                if (this.formItemType !== 'childForm') {
                    this.statusChangeFn.valueUpdateEvent({
                        [this.item.key]: v
                    })
                } else {
                    // 如果是子表单的话，执行内置的变更
                    this.childChangeData.valueUpdateEvent()
                }
            }
        }
    },
    watch: {
        item: {
            handler(n) {
                if (n.prefixMsg) {
                    this.prependMsg = n.prefixMsg
                }
                if (n.suffixMsg) {
                    this.appendMsg = n.suffixMsg
                }
            },
            immediate: true
        }
    },
    methods: {
        handleClickSpe() {
            if (this.checkRadioFlag) {
                this.val = null
            }
            this.checkRadioFlag = true
        },
        handleChangeSpe() {
            this.checkRadioFlag = false
        }
    }
}
</script>
